import Taro, { Component, Config } from '@tarojs/taro'
import { Input, View } from '@tarojs/components'
import './index.scss'
// import { showEmpty } from "@/utils/utils"
import { getPage } from "@/api/productApi"
import { TAB_BAR_HEIGHT } from "@/config/config"
import { getCategoryList } from '@/api/categoryApi'
import {GoodsFiveList, ListEmpty, Loading, LoadMore, TabBar} from '@/components/index'
import TabSearch from '@/components/tab-search/index'

export default class Index extends Component {
  state:any
  config: Config = {
    backgroundColor: process.env.backgroundColor,
    navigationBarTitleText: '商品分类',
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: false,
      page: 1,
      limit: 10,
      ctyList: [],
      ctyCheck: [],
      dataList: [],
      loadStatus: 'loading',
    }
  }

  componentDidMount () {
    this.getList()
    this.getGoodsPage()
  }

  //  监听用户上拉触底事件
  onReachBottom(){
    this.getGoodsPage()
  }

  //  获取分类数据
  getList() {
    getCategoryList().then(({ data }) => {
      const list =  [
        { list: [ { "id":'', "name":"全部分类" }, ...data ] },
        {
          list: [
            { id: "", name: "默认推荐" },
            { id: "hot", name: "畅销热卖" },
            { id: "location", name: "附近优先" },
            { id: "new", name: "新品上架" },
          ]
        }
      ]
      this.setState({
        ctyList: list
      })
    })
  }

  //  分页获取商品
  getGoodsPage() {
    const { page, limit, ctyCheck, dataList, loadStatus, searchInput }:any = this.state
    if (loadStatus === 'noMore') {
      return
    }
    const query = { page, limit }
    if (searchInput) {
      query['name'] = searchInput
    }

    if (ctyCheck[0]) {
      query['categoryId'] = ctyCheck[0]
    }
    getPage(query).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page + 1,
        dataList: page === 1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  //  初始化搜索
  initSearch(data: object) {
    this.setState(Object.assign({
      page: 1,
      dataList: [],
      loadStatus: 'loading',
    }, data), () => {
      this.getGoodsPage()
    })
  }

  //  键盘输入时触发
  onInput({ detail: { value } }) {
    this.setState({
      searchInput: value
    })
  }

  //  点击完成按钮时触发
  onConfirm({ detail: { value } }) {
    this.initSearch({
      searchInput: value
    })
  }

  //  清空input
  onEmptyInput() {
    this.initSearch({
      searchInput: ''
    })
  }

  //  选择分类
  onSelect(checked) {
    this.initSearch({
      ctyCheck: checked
    })
  }

  render () {
    const { loading, ctyList, dataList, loadStatus, searchInput } = this.state
    return (
      // @ts-ignore
      <View className='cty-page xf-page' style={{ '--tab-bar-height': `${TAB_BAR_HEIGHT}px` }}>
        {loading && <Loading />}
        <View className='page-head'>
          <View className='page-search'>
            <View className='page-search-left'>
              <View className='page-search-search-icon bnn-icon'>&#xe65c;</View>
              <Input
                value={searchInput}
                className='page-search-input'
                confirmType='search'
                placeholder='请输入要搜索的商品'
                placeholderClass='page-search-placeholder'
                onInput={this.onInput.bind(this)}
                onConfirm={this.onConfirm.bind(this)}
              />
              <View className='page-search-close-icon bnn-icon' onClick={this.onEmptyInput.bind(this)}>&#xe658;</View>
            </View>
            {/*<View className='page-search-right'>取消</View>*/}
          </View>
          <TabSearch list={ctyList} onSelect={this.onSelect.bind(this)}/>
        </View>

        {/*<GoodsOneList list={dataList}/>*/}
        <GoodsFiveList list={dataList}/>
        {/*{!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}*/}
        {/*{showEmpty(dataList, loadStatus) && <View className='list-empty'><EmptyData/></View>}*/}

        {!dataList.length && loadStatus == 'noMore' ? (<ListEmpty/>) : (<LoadMore status={loadStatus}/>)}

        <View style={{height: `${TAB_BAR_HEIGHT}px`}} />
        <TabBar />
      </View>)
  }
}
